<script setup lang="ts">
import { ref, type Ref } from 'vue';
import ComponentMenu from './ComponentMenu.vue';
import { useRouter } from 'vue-router';
import { isElementTopInViewport } from '@/vivid-ui/utils';
import { useScrollToTop } from '@/vivid-ui/utils/useScroll';
const componentContentWrapper = ref<HTMLElement>()
const { scrollToTop } = useScrollToTop()
const router = useRouter()
const handleUpdateRoute = (route: string) => {
  if (!isElementTopInViewport(componentContentWrapper as Ref<HTMLElement>))
    scrollToTop()
  router.push({ name: route })
}
</script>
<template>
  <div class="component-layout">
    <ComponentMenu @update:route="handleUpdateRoute" />
    <div class="component-content" ref="componentContentWrapper">
      <RouterView />
    </div>
  </div>
</template>
<style scoped>
.component-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
}

.component-content {
  padding: 20px;
  height: 90vh;
  overflow-y: scroll;
}
</style>
